<template>
<!--  <div class="el-tree-select">-->
<!--    <el-select-->
<!--      style="width: 100%"-->
<!--      v-model="valueId"-->
<!--      ref="treeSelect"-->
<!--      :filterable="true"-->
<!--      :clearable="true"-->
<!--      @clear="clearHandle"-->
<!--      :filter-method="selectFilterData"-->
<!--      :placeholder="placeholder"-->
<!--    >-->
<!--      <el-option :value="valueId" :label="valueTitle">-->
<!--        <el-tree-->
<!--          id="tree-option"-->
<!--          ref="selectTree"-->
<!--          :accordion="accordion"-->
<!--          :default-expand-all="true"-->
<!--          :data="productCategoryOptions"-->
<!--          :props="objMap"-->
<!--          :node-key="objMap.value"-->
<!--          :expand-on-click-node="false"-->
<!--          :default-expanded-keys="defaultExpandedKey"-->
<!--          :filter-node-method="filterNode"-->
<!--          @node-click="handleNodeClick"-->
<!--        ></el-tree>-->
<!--      </el-option>-->
<!--    </el-select>-->
<!--  </div>-->
  <el-tree-select v-model="unitValue" :value="unitValue" :data="productCategoryOptions" :props="{ value: 'id', label: 'name' }"
                   @change="handleBrandChange" :placeholder="placeholder.value" value-key="id" />
</template>

<script setup>

import {listProductCategory} from "@/api/pms/productCategory";

const {proxy} = getCurrentInstance();
const productCategoryOptions = ref([]);

const props = defineProps({
  modelValue: {
    defult: null,
    type: String
  },
  /**输入框内部的文字 */
  placeholder: {
    type: String,
    default: ''
  }
});

const emit = defineEmits(['update:modelValue']);
const unitValue = toRef(props, 'modelValue');
function handleBrandChange (id) {
  emit('update:modelValue', id)
}
// const selectUnitEvent = (val: any) => {
//   emit('update:modelValue', val)
// }
// const props = defineProps({
//   /* 配置项 */
//   objMap: {
//     type: Object,
//     default: () => {
//       return {
//         value: 'id', // ID字段名
//         label: 'name', // 显示名称
//         children: 'children' // 子级字段名
//       }
//     }
//   },
//   /* 自动收起 */
//   accordion: {
//     type: Boolean,
//     default: () => {
//       return false
//     }
//   },
//   /**当前双向数据绑定的值 */
//   value: {
//     type: [String, Number],
//     default: ''
//   },
//   /**当前的数据 */
//   options: {
//     type: Array,
//     default: () => []
//   },
//   /**输入框内部的文字 */
//   placeholder: {
//     type: String,
//     default: ''
//   }
// })
//
// const emit = defineEmits(['update:value']);
//
// const valueId = computed({
//   get: () => props.value,
//   set: (val) => {
//     emit('update:value', val)
//   }
// });
// const valueTitle = ref('');
// const defaultExpandedKey = ref([]);
//
// function initHandle() {
//   nextTick(() => {
//     const selectedValue = valueId.value;
//     console.log(selectedValue)
//     if (selectedValue !== null && typeof (selectedValue) !== 'undefined') {
//       const node = proxy.$refs.selectTree.getNode(selectedValue)
//       if (node) {
//         valueTitle.value = node.data[props.objMap.label]
//         proxy.$refs.selectTree.setCurrentKey(selectedValue) // 设置默认选中
//         defaultExpandedKey.value = [selectedValue] // 设置默认展开
//       }
//     } else {
//       clearHandle()
//     }
//   })
// }
//
// function handleNodeClick(node) {
//   valueTitle.value = node[props.objMap.label]
//   valueId.value = node[props.objMap.value];
//   defaultExpandedKey.value = [];
//   proxy.$refs.treeSelect.blur()
//   selectFilterData('')
// }
//
// function selectFilterData(val) {
//   proxy.$refs.selectTree.filter(val)
// }
//
// function filterNode(value, data) {
//   if (!value) return true
//   return data[props.objMap['label']].indexOf(value) !== -1
// }
//
// function clearHandle() {
//   valueTitle.value = ''
//   valueId.value = ''
//   defaultExpandedKey.value = [];
//   clearSelected()
// }
//
// function clearSelected() {
//   const allNode = document.querySelectorAll('#tree-option .el-tree-node')
//   allNode.forEach((element) => element.classList.remove('is-current'))
// }
//
// onMounted(() => {
//   initHandle()
// })
//
// watch(valueId, () => {
//   initHandle();
// })

listProductCategory().then(response => {
  productCategoryOptions.value = [];
  const data = { id: 0, name: '顶级节点', children: [] };
  data.children = proxy.handleTree(response.data, "id", "parentId");
  productCategoryOptions.value.push(data);
})

</script>

<style lang='scss' scoped>
@import "@/assets/styles/variables.module.scss";

.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
  padding: 0;
  background-color: #fff;
  height: auto;
}

.el-select-dropdown__item.selected {
  font-weight: normal;
}

ul li .el-tree .el-tree-node__content {
  height: auto;
  padding: 0 20px;
  box-sizing: border-box;
}

:deep(.el-tree-node__content:hover),
:deep(.el-tree-node__content:active),
:deep(.is-current > div:first-child),
:deep(.el-tree-node__content:focus) {
  background-color: mix(#fff, $--color-primary, 90%);
  color: $--color-primary;
}
</style>
